
import {PolymerElement, html} from 'https://unpkg.com/@polymer/polymer/polymer-element.js?module';

class OwlBallWave extends PolymerElement {


    constructor(){

        super();
    }
    connectedCallback(){

        super.connectedCallback();

    }
    static get properties() { return {
        mood: {

            type: String,
            value: "",
            observer:"_moodChange"
        },

        flag:{

            type:Boolean,
            value:false
        }

    }};


    _moodChange(newValue,oldValue){



    }

    static get template() {
        return html`
             <style>
         .owl-ball-wave {
            position: relative;
            width: 200px;
            height: 200px;
            background-color: rgb(118, 218, 255);
            border-radius: 50%;
            overflow: hidden;
            
            }
          
             .owl-ball-wave::before,
             .owl-ball-wave::after{
                content: "";
                position: absolute;
                width: 400px;
                height: 400px;
                top: 0;
                left: 50%;
                background-color: rgba(255, 255, 255, .4);
                border-radius: 45%;
                transform: translate(-50%, -70%) rotate(0);
                animation: rotate 6s linear infinite;
                z-index: 10;
            }
             
             .owl-ball-wave::after {
                border-radius: 47%;
                background-color: rgba(255, 255, 255, .9);
                transform: translate(-50%, -70%) rotate(0);
                animation: rotate 10s linear -5s infinite;
                z-index: 20;
            }
        
         
        @keyframes rotate {
            50% {
                transform: translate(-50%, -73%) rotate(180deg);
            } 100% {
                transform: translate(-50%, -70%) rotate(360deg);
            }
        }
                     
            </style>
        <div   
         <div class="owl-ball-wave">
                       
          </div>
        </div>

        `;
    }

    toggle(){


    }

}

customElements.define("owl-ball-wave",OwlBallWave);
